| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167 |
| /**
* @ngdoc directive
* @name patternfly.card.component:pfCard - Trends
* @restrict E
*
* @param {string} headTitle Title for the card
* @param {string=} subTitle Sub-Title for the card
* @param {string=} spinnerText Text for the card spinner
* @param {string=} spinnerCardHeight Height to set for the card when data is loading and spinner is shown
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
* @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
* True (default) shows the line, false hides the line
* @param {object=} footer footer configuration properties:<br/>
* <ul style='list-style-type: none'>
* <li>.iconClass - (optional) the icon to show on the bottom left of the footer panel
* <li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon
* <li>.href - (optional) the href link to navigate to when the footer href is clicked
* <li>.callBackFn - (optional) user defined function to call when the footer href is clicked
* </ul>
* *Note: If a href link and a callBackFn are specified, the href link will be called
* @param {object=} filter filter configuration properties:<br/>
* <ul style='list-style-type: none'>
* <li>.filters - drop down items for the filter.
*<pre class=''>
* Ex: 'filters' : [{label:'Last 30 Days', value:'30'},
* {label:'Last 15 Days', value:'15'},
* {label:'Today', value:'today'}]</pre>
* <li>.defaultFilter - integer, 0 based index into the filters array
* <li>.callBackFn - user defined function to call when a filter is selected
* </ul>
* @description
* Component for easily displaying a card with html content
*
* @example
<example module="demo">
<file name="index.html">
<div ng-controller="ChartCtrl">
<label class="label-title">Card With Single Trend</label>
<pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
<pf-trends-chart config="configSingle" chart-data="dataSingle"></pf-trends-chart>
</pf-card>
<pf-card head-title="Cluster Utilization" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading" footer="footerConfig" filter="filterConfig" style="width: 50%">
<pf-trends-chart config="configRightLabel" chart-data="dataSingle"></pf-trends-chart>
</pf-card>
<label class="label-title">Card with Multiple Trends</label>
<pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false" show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
<pf-trends-chart config="configVirtual" chart-data="dataVirtual"></pf-trends-chart>
<pf-trends-chart config="configPhysical" chart-data="dataPhysical"></pf-trends-chart>
<pf-trends-chart config="configMemory" chart-data="dataMemory"></pf-trends-chart>
</pf-card>
</div>
</div>
</file>
<file name="script.js">
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope, $timeout ) {
$scope.dataLoading = true;
$timeout(function () {
$scope.dataLoading = false;
}, 3000 );
$scope.footerConfig = {
'iconClass' : 'fa fa-flag',
'text' : 'View All Events',
'callBackFn': function () {
alert("Footer Callback Fn Called");
}
};
$scope.filterConfig = {
'filters' : [{label:'Last 30 Days', value:'30'},
{label:'Last 15 Days', value:'15'},
{label:'Today', value:'today'}],
'callBackFn': function (f) {
alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
},
'defaultFilter' : '1'
};
var today = new Date();
var dates = ['dates'];
for (var d = 20 - 1; d >= 0; d--) {
dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
}
$scope.configSingle = {
'chartId' : 'example2TrendsChart',
'title' : 'Storage Capacity',
'layout' : 'compact',
'valueType' : 'actual',
'units' : 'TB',
'tooltipType' : 'percentage'
};
$scope.configRightLabel = {
'chartId' : 'exampleRightLabelTrendsChart',
'title' : 'Storage Capacity',
'layout' : 'compact',
'valueType' : 'actual',
'units' : 'TB',
'tooltipType' : 'percentage',
'compactLabelPosition' : 'right'
};
$scope.dataSingle = {
'total': '250',
'xData': dates,
'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']
};
$scope.configVirtual = {
'chartId' : 'virtualTrendsChart',
'layout' : 'inline',
'trendLabel' : 'Virtual Disk I/O',
'units' : 'GB',
'tooltipType' : 'percentage'
};
$scope.dataVirtual = {
'total': '250',
'xData': dates,
'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']
};
$scope.configPhysical = {
'chartId' : 'physicalTrendsChart',
'layout' : 'inline',
'trendLabel' : 'Physical Disk I/O',
'units' : 'MHz',
'tooltipType' : 'percentage'
};
$scope.dataPhysical = {
'total': '250',
'xData': dates,
'yData': ['used', '20', '20', '35', '20', '20', '87', '14', '20', '25', '28', '44', '56', '78', '56', '67', '88', '76', '65', '87', '16']
};
$scope.configMemory = {
'chartId' : 'memoryTrendsChart',
'layout' : 'inline',
'trendLabel' : 'Memory Utilization',
'units' : 'GB',
'tooltipType' : 'percentage'
};
$scope.dataMemory = {
'total': '250',
'xData': dates,
'yData': ['used', '20', '20', '35', '70', '20', '87', '14', '95', '25', '28', '44', '56', '66', '16', '67', '88', '76', '65', '87', '56']
};
$scope.actionBarConfig = {
'iconClass' : 'fa fa-plus-circle',
'text' : 'Add New Cluster',
'callBackFn': function () {
alert("Footer Callback Fn Called");
}
}
});
</file>
</example>
*/
|